<%@ include file="../common/IncludeTop.jsp"%>

<div id="Login" align="center">
	<fieldset style="width:730px; margin:0px auto">
		<legend>User Registration</legend>
	<form action="newAccountAction" method="post">

	<h3>User Information</h3>

	<table align="center">
		<tr>
			<td>User ID:</td>
			<td><input type="text" name="username" id="username" onblur="checkUser()" placeholder="Please enter username"/><img id="isExistInfo" src="images/white.png" ></td>
		</tr>
		<tr>
			<td>New password:</td>
			<td><input type="password" name="password" id="password" onblur="getName()" placeholder="Please enter password"/><img id="isRightInfo" src="images/white.png"></td>
		</tr>
		<tr>
			<td>Repeat password:</td>
			<td><input type="password" name="repeatedPassword" id="confirm" onblur="checkPassword()" placeholder="Repeat password"/><img id="isSameInfo" src="images/white.png"></td>
		</tr>
	</table>

	<%@ include file="IncludeAccountFields.jsp"%><br />
		<p>Randcode:<input  id="validation" type="text" name="image" onblur="getCode()" placeholder="Please enter code">
		<img   id="VerifyCode"  src="pictureCheckCode"  />
		<input type="button" value="New Code" id="flush">
		<font color="red">${requestScope.imageMess}</font>
			<img id="isTrueInfo" src="images/white.png">
		<br>
		</p><br/>
		<input type="submit" name="newAccount" value="Save Account Information"/>

</form>
	<script type="text/javascript">

        document.getElementById("flush").onclick = function () {
            // 获取img元素
            // 为了让浏览器发送请求到servlet, 所以一定要改变src
            document.getElementById("VerifyCode").src =
                "pictureCheckCode?time=" + new Date().getTime();
        };
	</script>
		<script >
			var xhr;
			function checkUser(){
				var username = document.getElementById("username").value;
				xhr = new XMLHttpRequest();
				xhr.onreadystatechange = processName;
				xhr.open("GET","usernameIsExist?username="+username,true);
				xhr.send(null);
			}

			function processName(){

				if(xhr.readyState == 4){
					if(xhr.status == 200){
						var username = document.getElementById("username").value;
						var responseInfo = xhr.responseText;
						if(responseInfo == "Not Exist"&& username !=""){
							document.getElementById("isExistInfo").src =
									"images/isExist.jpg" ;
						}
						else if(responseInfo =="Exist"){
							document.getElementById("isExistInfo").src =
									"images/notIsExist.jpg" ;
						}

					}
				}
			}

		</script>
		<script >
			var xhr;
			function getName(){
				var username = document.getElementById("username").value;
				xhr = new XMLHttpRequest();
				xhr.onreadystatechange = processPsd;
				xhr.open("GET","usernameIsExist?username="+username,true);
				xhr.send(null);
			}

			function processPsd(){
				var password = document.getElementById("password").value;
				if(xhr.readyState == 4){
					if(xhr.status == 200){

						var responseInfo = xhr.responseText;
						if(responseInfo == "Not Exist" && password!=""){
							document.getElementById("isRightInfo").src =
									"images/isExist.jpg" ;
						}
						else if(responseInfo =="Exist"){
							document.getElementById("isRightInfo").src =
									"images/notIsExist.jpg" ;
						}

					}
				}
			}

		</script>
		<script>
			var xhr;
			function getCode(){
				var code = document.getElementById("validation").value;
				xhr = new XMLHttpRequest();
				xhr.onreadystatechange = processCode;
				xhr.open("GET","checkCode?code="+code,true);
				xhr.send(null);
			}
			function processCode(){
				if(xhr.readyState == 4){
					if(xhr.status == 200) {
						var responseInfo = xhr.responseText;

						if(responseInfo == 'T'){
							document.getElementById("isTrueInfo").src =
									"images/isExist.jpg" ;
						}
						else if(responseInfo =='F'){
							document.getElementById("isTrueInfo").src =
									"images/notIsExist.jpg" ;

						}
					}
				}
			}
		</script>
		<script>
			var xhr;
			function checkPassword()
			{
					var password = document.getElementById("password").value;
					xhr = new XMLHttpRequest();
					xhr.onreadystatechange = process;
					xhr.open("GET","editPassword?password="+password,true);
					xhr.send(null);
			}

			function process(){
				var cpsd = document.getElementById("confirm").value;
				var responseInfo = xhr.responseText;
				if(cpsd == responseInfo && cpsd!="") {
					document.getElementById("isSameInfo").src =
							"images/isExist.jpg" ;
				}
				else{
					document.getElementById("isSameInfo").src =
							"images/notIsExist.jpg" ;
				}
			}
		</script>
	</fieldset>
</div>


<%@ include file="../common/IncludeBottom.jsp"%>